<template>
    <!-- 账变记录 -->
    <div class="accountChange">
        <div class="px-32 py-30 flex items-center">
            <!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
            <div class="inputBoxbg h-60 w-full rounded-full flex items-center">
                <img src="@/assets/image/icon-search.png" alt="logo" class="w-32 h-32 mx-16" />
                <input type="text" v-model="keywords" :placeholder="$t('搜索')"
                    class="h-full flex-1 border-none search-input bg-none" @input="onInput" />
            </div>
            <div class="cancel" @click="cancel">
                {{ $t('取消') }}
            </div>
        </div>
        <van-tabs v-model="active" @change="changeValue">
            <van-tab :title="$t('热门搜索')"></van-tab>
            <van-tab :title="$t('热门功能')"></van-tab>
        </van-tabs>
        <div v-if="active == 0" class="px-32 mt-20">
            <div class="list-item flex" v-for="(item, index) in currencyList" :key="index" @click.stop="onItemClick(item)">
                <div class="flex-1 item-left flex">
                    <div class="">
                        <van-icon class="star-icon-check" v-if="index == 0 || index == 1" name="fire" />
                        <span v-else class="font-35">
                            {{ index + 1 }}
                        </span>
                    </div>
                    <div class="pl-30 symbol-name">{{ item.symbol.toUpperCase() }}<span>/usdt</span></div>
                </div>
                <div class="item-right">
                    <div class="symbol-name">{{ item.close }}</div>
                    <div class="increase  mt-10" :class="[item.change_ratio > 0 ? 'green' : 'red']">{{ item.change_ratio
                    }}%</div>
                </div>
                <van-icon :class="[item.isCollection ? 'star-icon-check' : 'star-icon']" class="font-40 ml-20" name="star"
                    @click.stop="onCollect(item)" />
            </div>
        </div>
        <div v-if="active == 1" class="px-32 mt-30">
            <div class="function-item list-item flex" v-for="(item, index) in dataList" @click="jump(item.path)"
                :key="index">
                <div class="flex-1 flex item-left">
                    <div>
                        <span v-if="index == 0 || index == 1">{{ index + 1 }}</span>
                        <span v-else>
                            {{ index + 1 }}
                        </span>

                    </div>
                    <div class="imgBox ml-30"><img :src="item.icon" alt=""></div>
                    <div class=" ml-30 symbol-name">{{ item.name }}</div>
                </div>
                <div class="item-right">
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>
        <div v-if="dataList.length == 0 || currencyList.length == 0"
            class="flex flex-col justify-center items-center pt-185">
            <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
            <p class="textColor">{{ $t('暂无数据') }}</p>
        </div>
        <div class="loading-box" v-if="isLoading">
            <van-loading type="spinner" size="24px" />
        </div>
    </div>
</template>

<script>
import { _fundRecord } from '@/API/fund.api'
import { List } from 'vant'
import { Tab, Tabs, Loading } from 'vant';
import { _getHomeList, _myCoins, _collect, _deleteCollect } from '@/API/home.api'
import { mapGetters } from "vuex";
import { TIME_OUT } from "@/config";
import { setStorage } from "@/utils/utis";
export default {
    name: "search",
    data() {
        return {
            keywords: '',
            active: 0,
            allFunList: [],
            dataList: [],
            allCurrencyList: [],
            currencyList: [],
            timeout: null,
            collectionList: [],
            isLoading: true
        }
    },
    mounted() {
        this.allFunList = [
            {
                name: this.$t('理财'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/finance.png`),
                path: '/fm-home'
            },
            {
                name: this.$t('充值'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/account.png`),
                path: '/recharge/rechargeList'
            },
            {
                name: this.$t('合约交易'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/trading.png`),
                path: '/trendDetails/btc'
            },
            {
                name: this.$t('闪兑'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/exchange.png`),
                path: '/exchange/exchangePage'
            }
        ]
        this.dataList = this.allFunList
        if (this.$store.state.user.userInfo.token) {
            this.myCoinsList()
        }
        setTimeout(() => {
            this.fetchQList();
        }, 1000)
    },
    components: {
        [List.name]: List,
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
        [Loading.name]: Loading
    },
    watch: {
        collectionList(val) {
            if (val) {
                this.allCurrencyList.map((item) => {
                    val.map((item2) => {
                        if (item.symbol == item2.symbol) {
                            item.isCollection = true
                        }
                    })
                })
                this.currencyList.map((item) => {
                    val.map((item2) => {
                        if (item.symbol == item2.symbol) {
                            item.isCollection = true
                        }
                    })
                })
            }
        }
    },
    computed: {
        ...mapGetters({
            coinArr: 'home/coinArr',
            theme: 'home/theme'
        }),
    },
    filters: {

    },
    beforeDestroy() {
        clearInterval(this.timeout)
    },
    methods: {
        onInput() {
            if (this.active == 1) {
                if (this.keywords) {
                    this.dataList = this.dataList.filter((item) => {
                        return item.name.indexOf(this.keywords) != -1
                    })
                } else {
                    this.dataList = this.allFunList
                }
            }
        },
        cancel() {
            this.$router.go(-1)
        },
        jump(path) {
            this.$router.push(path)
        },
        myCoinsList() {
            _myCoins().then((res) => {
                this.collectionList = res

            })
        },
        onCollect(item) { // 收藏，取消收藏
            let _api = _collect
            if (item.isCollection) {
                _api = _deleteCollect
            }
            _api(item.symbol).then(() => {
                this.myCoinsList()
                item.collected = !item.collected
                if (!item.isCollection) {
                    this.$toast.success(this.$t('收藏成功'))
                } else {
                    this.$toast.success(this.$t('取消收藏'))
                }
            })
        },
        fetchQList() { // 获取行情
            _getHomeList(this.coinArr.join(',')).then((res) => {
                this.isLoading = false
                res.map((item) => {
                    this.$set(item, 'isCollection', false)
                })
                this.allCurrencyList = res
                this.currencyList = res
                this.allCurrencyList.map((item) => {
                    this.collectionList.map((item2) => {
                        if (item.symbol == item2.symbol) {
                            item.isCollection = true
                        }
                    })
                })
                this.currencyList.map((item) => {
                    this.collectionList.map((item2) => {
                        if (item.symbol == item2.symbol) {
                            item.isCollection = true
                        }
                    })
                })
                if (this.active == 0) {
                    if (this.keywords) {
                        this.currencyList = this.currencyList.filter((item) => {
                            return item.name.toUpperCase().indexOf(this.keywords.toUpperCase()) != -1
                        })
                    } else {
                        this.currencyList = this.allCurrencyList
                    }
                }
                this.timeout = setTimeout(() => {
                    this.fetchQList()
                }, 1000)
            })

            if (this.timeout) {
                clearInterval(this.timeout)
            }
        },
        changeValue() {
            console.log(this.dataList)
            this.keywords = ''
        },
        onItemClick(item) {

            setStorage('symbol', item.symbol)
            this.$router.push({
                path: `/perpetualContract/${item.symbol}`
            });

        }
    }
}
</script>
<style lang="scss" scoped>
.cancel {
    width: 150px;
    text-align: center;
    color: #868D9A;
    font-size: 28px;
}

.inputBoxbg {
    @include themify() {
        background: themed("tab_background");
    }

}

.search-input {
    @include themify() {
        color: themed("text_color");
    }
}

.list-item {
    align-items: center;
    margin-bottom: 40px;

    .item-left {
        font-size: 36px;
        font-weight: bold;

        span {
            color: #868D9A;
            font-weight: initial;
            font-size: 28px;
        }
    }

    .item-right {
        text-align: right;
        font-size: 30px;
        font-weight: bold;

        .increase {
            font-size: 26px;
            font-weight: initial;
        }
    }

    .green {
        color: #5EBA89;
    }

    .red {
        color: #F6465D;
    }

}

.function-item {
    align-items: center;
    margin-bottom: 60px;

    .item-left {
        font-size: 30px;
        font-weight: bold;
    }

    .item-right {
        color: #B8BDC5;
        font-size: 30px;
    }

    .imgBox {
        img {
            width: 42px;
            height: 42px;
        }
    }
}

.star-icon {
    color: #c8cad2;
}

.star-icon-check {
    color: #FCD436;
}

.symbol-name {
    @include themify() {
        color: themed("text_color");
    }
}

.accountChange {
    ::v-deep .van-tabs__nav {
        background: transparent;
    }

    ::v-deep .van-tab {
        @include themify() {
            color: themed("text_color");
        }
    }
}

.loading-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}
</style>
